<template>
  <div>
    <div class="node" v-has="{action: 'priceStay:list', effect: 'move'}">
      <div class="search_box topSelect">
      </div>
      <Panel title="占位费率">
        <div slot='ext' class="examine">
          <el-button size="mini" v-has="{action: 'priceStay:add', effect: 'move'}" class="button-offt" type="success" icon="el-icon-plus" @click="()=>edit()">新增</el-button>
          <el-button type="default" icon="el-icon-refresh" class="button-offt" @click="()=>queryData()">刷新数据</el-button>
      </div>
      <TableEncapsulation
        slot="body"
        :tableConfig="tableConfig"
        :tableData="tableData"
      >
      <template slot="operation" slot-scope="operation">
            <el-button size="mini" icon="el-icon-edit"
              v-has="{action: 'priceStay:update', effect: 'move'}"
              @click="()=>edit(operation.row)"
            >编辑</el-button>
            <el-button size="mini" type="primary" 
            v-has="{action: 'priceStay:update', effect: 'move'}"
            v-if="operation.row.state==1"
            @click="()=>updateState(operation.row.id, 2)"
          >一键上线</el-button>
          </template>
          <TablePager
            slot="pager"
            v-if="pager.use"
            :size="pager.size"
            :pageChange="pageChange"
            :show-total="pager.showTotal"
            :total="pager.total"
            :current="pager.current"
          >
            <span class="demonstration">GO></span>
          </TablePager>
      </TableEncapsulation>
      </Panel>

      <ModalPanel 
        :visible='visible'
        title="编辑"
        :onCancel="onCancel"
        class="bannerDialog"
        :onOk="onSubmit">
        <div>
          <ModifyForm
            :hiddenBtn='true'
            :editColumn='editColumn'
            :updateData="updateData"
            labelWidth='100px'
            ref="configModal"
            class="ModifyForm"
            :temporaryData='modalData'>
            <div slot="timeTamp">
              <el-date-picker
                v-model="appointmentTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </ModifyForm>
        </div>
      </ModalPanel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'priceStay:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
export default {
  name: "smsTemplate",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    ModifyForm,
    ModalPanel
  },
  data() {
    return {
      visible:false,
      modalData:{},
      tableData: [],
      pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      operation: true,
      appointmentTime:'',
      editColumn: [
        {
          name: "站点",
          prop: "stationId",
          type: "select",
          optionBindLabel: 'stationName',
          optionBindValue: 'id',
          optionList: [{'id':'','stationName':'充电站'}],
          onChange: () => {},
          required:true,
          width:24
        },
        {
          name: "免费时长(分)",
          prop: "freeDuration",
          type: "text",
          required: true,
          width: 24
        },
        {
          name: "单价(每分钟)",
          prop: "unitPrice",
          type: "text",
          required: true,
          width: 24
        },
        {
          name: "封顶价",
          prop: "maxStayMoney",
          type: "text",
          required: true,
          width: 24
        },
        {
          name: "免费几分钟后通知",
          prop: "freeStayNotifyDuration",
          type: "text",
          required: false,
          width: 24
        },
        {
          name: "收费几分钟后通知",
          prop: "billingStayNotifyDuration",
          type: "text",
          required: false,
          width: 24
        },
        {
          name: "生效时间",
          prop: "time",
          type: "other",
          width:24,
          required: false,
          slotName: 'timeTamp',
        },
      ],
    };
  },
  created() {
    this.queryData();
    this.getStation()
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "ID",
            type: "text",
            prop: "id",
            align: "center"
          },
           {
            label: "免费时长(分)",
            type: "text",
            prop: "freeDuration",
            align: "center"
          },
          {
            label: "单价(每分钟)",
            type: "text",
            prop: "unitPrice",
            align: "center",
            width: 100
          },
           {
            label: "封顶价",
            type: "text",
            prop: "maxStayMoney",
            align: "center"
          },
          {
            label: "免费几分钟后通知(分)",
            type: "text",
            prop: "freeStayNotifyDuration",
            align: "center"
          },
          {
            label: "收费几分钟后通知(分)",
            type: "text",
            prop: "billingStayNotifyDuration",
            align: "center",
            width: 100
          },
          {
            label: "生效时间",
            type: "text",
            prop: "takeEffectTime",
            align: "center"
          },
          {
            label: "状态",
            type: "other",
            prop: "state",
            align: "center",
            width: '120px',
            fnc: val => val == 1 ? "待生效" : val == 2 ? "生效中" : "已过期",
            class: val => val == 1 ? "wait" : val == 2 ? "agree" : "cancel"
          },
          
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    //获取站点
    async getStation(){
      let { data } = await request({
      url: "/manage/station/select",
      method: "POST",
      data: {}
      });
      this.editColumn[0].optionList = data
    },
    async queryData() {
      let current =this.pager.current
      let size =this.pager.size
      const res = await request({
        url: "/manage/price/stay/query",
        method: "POST",
        data: {current:current, size: size}
      });
      this.tableData = res.data.records
      this.pager.total = res.data.total
      this.pager.current = res.data.current
    },
    pageChange(val) {
      this.pager.current = val;
      this.queryData();
    },
    changeSearch(key, val) {
      this[key] = val;
      this.query.page = 1;
    },
     async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
    edit(rowData){
      this.modalData = {...rowData}
      this.visible = true
    },
     onCancel(){
      this.visible = false
    },
    async updateData(values){
      let url = values.id ? "/manage/price/stay/update" : "/manage/price/stay/add"
      let msg = values.id ? "编辑成功" : "添加成功"
      let takeEffectTime = this.appointmentTime
      let {id, stationId, freeDuration, unitPrice, maxStayMoney, freeStayNotifyDuration, billingStayNotifyDuration, state,  } = values
      let res = await request({
        url: url,
        method: "POST",
        data: {id, takeEffectTime,stationId, freeDuration, unitPrice, maxStayMoney, freeStayNotifyDuration, billingStayNotifyDuration, state,  }
      })
      if( res.code !== 200) return
      this.$message.success(msg)
      this.visible = false
      this.queryData()
    },
    async updateState(id, state){
    let res = await request({
        url: '/manage/price/stay/update/state',
        method: "POST",
        data:{id, state}
      })
     if(res.code !==200) return
      this.$message.success('成功')
      this.queryData();
   },
  },
  
  
}
</script>
<style lang='scss' >

</style>